<!--  -->
<template>
  <div>
    <el-button type="primary">{{test}}</el-button>
    <div class="test"></div>
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
interface DataProps {}
export default {
  name: "",
  data() {
    return {
      test: "122311213123123"
    };
  },
  setup() {
    console.log("1-开始创建组件-setup");
    const data: DataProps = reactive({});
    onBeforeMount(() => {
      console.log("2.组件挂载页面之前执行----onBeforeMount");
    });
    onMounted(() => {
      console.log("3.-组件挂载到页面之后执行-------onMounted");
    });
    const refData = toRefs(data);
    return {
      ...refData
    };
  }
};
</script>
<style lang="sass" scoped>
  .test{
    height:200px;
    width:200px;
    background:red;
  }
</style>